<template>
  <div class="top">
    <el-row>
      <el-col :span="24">
        <div class="top_menu" :style="{'backgroundImage':'url('+color[2]+')'}">
          <h1 :style="{'background':color[0],'borderBottom':'7px solid '+color[1]}">祖龙娱乐BI系统</h1>
          <div class="header" :style="{'borderBottom':'7px solid '+color[0]}">
            <el-menu :theme="color[4]" router :default-active="routerName" class="el-menu-demo" mode="horizontal" @select="handleSelect">
              <el-menu-item index="/main"> <i class="icon iconfont">&#xe729;</i>
                游戏分析
              </el-menu-item>
              <el-menu-item index="/accredit" v-if="isAdmin"> <i class="icon iconfont">&#xe726;</i>
                授权管理
              </el-menu-item>
              <el-menu-item index="/system" v-if="isAdmin">
                <i class="icon iconfont">&#xe726;</i>
                系统配置
              </el-menu-item>
              <el-menu-item index="/resources" v-if="isAdmin">
                <i class="icon iconfont">&#xe726;</i>
                告警管理
              </el-menu-item>
            </el-menu>
            <div class="block">
              <!-- <el-cascader
                    placeholder="试试搜索：指南"
                    :options="options"
                    filterable
                    change-on-select
                  ></el-cascader>
            -->
          </div>
          <div class="header_right">
            <span class="animated fadeIn header_nev_right">
              <i class="icon iconfont">&#xe6f1;</i>
              {{user}}
            </span>
            <span>|</span>
            <span class="animated fadeIn header_nev_right" @click="loginOut">
              <i class="el-icon-information"></i>
              退出
            </span>
            <span>|</span>
            <span class="animated fadeIn header_nev_right" @click="modify">
              <i class="el-icon-edit"></i>
              修改密码
            </span>
            <span>|</span>
            <span class="animated fadeIn header_nev_right" @click="feedback">
              <i class="el-icon-star-on"></i>
              意见反馈
            </span>
            <span v-show="false">|</span>
            <el-select v-show="false" v-model="themeValue" placeholder="请选择" size = "mini" style="width: 100px;margin-top: 35px;color:#000;" @change="themeChange(themeValue)">
              <el-option
                    v-for="item in themes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"></el-option>
            </el-select>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
  <div class="repeatPassword" v-show="passwordShade">
    <div class="addUserChoose">
      <div class="vicp-close"  @click="passwordShade=false">
        <i class="el-icon-close vicp-icon4"></i>
      </div>
      <el-form :model="userform" :rules="userRules" ref="userform" label-width="100px" class="demo-ruleForm">
        <h5>修改密码</h5>
        <el-form-item label="用户名" >
          <span>{{userform.userName}}</span>
        </el-form-item>
        <el-form-item label="原始密码" prop="oldPassword">
          <el-input v-model="userform.oldPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="userform.newPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="newPassword2">
          <el-input v-model="userform.newPassword2" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('userform')">立即修改</el-button>
          <el-button @click="resetForm('userform')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="../assets/css/top.styl"></style>
<script>
import {toggleClass} from '../assets/js/changeTheme.js'
import defaultDark from '../assets/img/theme_default_head.jpg'
import defaultDark2 from '../assets/img/theme_default_head2.jpg'
import themeRed from '../assets/img/theme_red_head.jpg'
import themeRed2 from '../assets/img/theme_red_head_2.jpg'
import themeGray from '../assets/img/theme_gray_head.jpg'
import themeGray2 from '../assets/img/theme_gray_head2.jpg'
import cookie from '../assets/js/cookie.js'
export default {
  name: 'app',
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.userform.newPassword !== '') {
          this.$refs.userform.validateField('newPassword2');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.userform.newPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    }
    return {
      /*修改密码弹窗*/
      passwordShade: false,
      /*通用src */
      SRC:'',
      /*用户表单*/
      userform: {
        userName:'',
        oldPassword: '',
        newPassword: '',
        newPassword2: ''
      },
      userRules: {
        oldPassword: [
          { required: true,  trigger: 'blur', min: 8, max: 16, message: '长度在 8 到 16 个字符'}
        ],
        newPassword: [
          { required: true, validator: validatePass, trigger: 'blur' },
          { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' }
        ],
        newPassword2: [
          { required: true, validator: validatePass2, trigger: 'blur' },
          { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' }
        ]
      }, 
      /*是否是admin账户*/
      isAdmin:false,
      // 用户名
      user: '',
      // 主题颜色数组
      color:[],
      activeIndex: '1',
      routerName:"/main",//默认菜单
      themes: [
        {
          value: 'theme-default',
          label: '水晶绿',
          // logo的颜色 logo的描边 顶部菜单背景  侧导航背景 主题的深色和浅色  内容条的背景色 文字颜色
          color: ["#2eb398","#27977f",defaultDark,defaultDark2,"dark","#324157","#bfcbd9"]
        }, 
        {
          value: 'theme-red',
          label: '中国红',
          color: ["#d33f3f","#c82e2e",themeRed,themeRed2,"light","#f6f0ee","rgb(106, 78, 72)"]
        }, 
        {
          value: 'theme-blue',
          label: '宝石蓝',
          color: ["#20a0ff","#1e79bd",defaultDark,defaultDark2,"dark","#324157","#bfcbd9"]
        }, 
        {
          value: 'theme-gray',
          label: '深色灰',
          color: ["#000000","#969696",themeGray2,themeGray,"light","rgb(43, 43, 53)","rgb(155, 155, 155)"]
        }
      ],
      themeValue: ''
    }
  },
  methods: {
    successFun(data) {
      this.$message({
        message: data,
        type: 'success'
      });
    },
    errorFun(data) {
      this.$message.error(data);
    },
    // 登出
    loginOut() {
      var newObj = {
        sign : localStorage.getItem("sign"),
        timestamp : localStorage.getItem("timestamp"),
        uuid : localStorage.getItem("uuid"),
        appid: "zlbiweb_OA"
      }
      
      this.$http
                .jsonp(
                    "http://bi.zulong.com/mid/user/ssologout.do", {
                        params: newObj
                    }
                )
                .then(function(res) {
                    console.log(JSON.parse(res.body))
                    cookie.del("uuid");
                    document.cookie = 'uuid=; domain=.zulong.com;';
                    document.getElementById("login_iframe").src = "http://sso-test.zulong.com/acs_sso/view/5?appid=zlbiweb_OA&callback=http://bi.zulong.com";
                });
      localStorage.setItem("ZULONGBIISLOGING",false);
      localStorage.setItem("sign","");
      localStorage.setItem("timestamp","");
      localStorage.setItem("uuid","");
      this.$router.push({ path: '/login' });
    },
    // 修改密码
    modify() {
      this.passwordShade = true;
    },
    feedback() {
      this.$notify.success({
        title: '成功',
        message: '请联系运营中心-BI项目组',
        offset: 100
      });
    },
    // 顶部菜单展示
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    themeChange(val) {
      for(var i=0; i<this.themes.length; i++){
        if(this.themes[i]["label"] === val){
          this.$store.commit('THEMECHANGE', this.themes[i]['color']);
          toggleClass(document.body, this.themes[i]['value'])
          this.theme;
        }
      }
    },
    // 添加用户提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.modifyPassword();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 请求修改密码
    modifyPassword(){
      this.$http.post(this.SRC+'password/modify.do',this.userform,{emulateJSON:true}).then(function(res){
        var data = res.body;
        console.log(data.code,typeof data.code)
        if(data.code === 0){
          this.successFun('修改成功！请牢记密码！');
          localStorage.setItem('ZULONGBIPASSWORD',this.userform.newPassword);
        }else{
          if(data.res === '1'){
            this.errorFun('请登录后修改密码！')
          }else{
            this.errorFun(data.msg)
          }
        }
      })
    },
    // 添加用户重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  computed: {
    theme() {
      // 设置主题颜色
      this.color = this.$store.getters.theme;
    }
  },
  components: {
  },
  beforeMount(){
    /*默认菜单改变*/
    this.routerName = this.$route.matched[0].path;
    this.theme;
  },
  mounted() {
    this.SRC = this.$store.getters.src;
    if(localStorage.getItem("ZULONGBIISADMIN") === "true"){
      this.isAdmin = true;
    }else {
      this.isAdmin = false;
    }
    this.user = localStorage.getItem("ZULONGBIUSER");
    this.userform.userName = this.user;
  }
}
</script>